<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button.active{
            color: #fff;
            background-color: orangered;
        }
        canvas{
            border: 1px solid #00f;
        }
    </style>
</head>
<body>
    <canvas id="c1" width="600" height="400">
        浏览器不支持canvas
    </canvas>

    <hr>

    <button id="blodBtn" type="button">粗线条</button>
    <button id="thinBtn" type="button">细线条</button>
    <button id="saveBtn" type="button">保存签名</button>

    <input type="color" name="" id="color" value=""/>

    <button id="clearBtn" type="button">橡皮擦</button>
    <button id="nullBtn" type="button">清空画布</button>
    <script>
        /** @type {HTMLCanvasElement}*/

        //1.获取canvas对象和绘制的上下文对象
        var canvas = document.getElementById('c1');
        if(!canvas.getContext){
            console.log('浏览器不支持canvas')

        }
        var ctx = canvas.getContext('2d');

        ctx.lineJoin ="round";
        ctx.lineCap ="round";

        //2。获取输入框和按钮
        var blodBtn = document.querySelector('#blodBtn');
        var thinBtn = document.querySelector('#thinBtn');
        var saveBtn = document.querySelector('#saveBtn');
        var inputColor = document.querySelector('#color');
        var clearBtn = document.querySelector('#clearBtn');
        var nullBtn = document.querySelector('#nullBtn');

        var isDraw = false;

        canvas.onmousedown =  function(){
            isDraw = true;
            ctx.beginPath();
            var x = event.pageX - canvas.offsetLeft;
            var y = event.pageY - canvas.offsetTop;
            ctx.moveTo(x,y);
        }

        canvas.onmouseleave =  function(){
            isDraw = false;
            ctx.closePath(); 
        }

        canvas.onmouseup =  function(){
            isDraw = false;
            ctx.closePath(); 
        }

        canvas.onmousemove = function(){
            if(isDraw){
                var x = event.pageX - canvas.offsetLeft;
                var y = event.pageY - canvas.offsetTop;
                ctx.lineTo(x,y);
                ctx.stroke();
            }

        }

        blodBtn.onclick = function(){
            ctx.lineWidth = 10; 
            ctx.globalCompositeOperation ="source-over";
            blodBtn.classList.add('active');
            thinBtn.classList.remove('active');
            clearBtn.classList.remove('active');
        }

        thinBtn.onclick = function(){
            ctx.lineWidth = 1;
            ctx.globalCompositeOperation ="source-over";
            thinBtn.classList.add('active');
            blodBtn.classList.remove('active');
            clearBtn.classList.remove('active');
        }

        clearBtn.onclick = function(){
            ctx.globalCompositeOperation ="destination-out";
            ctx.lineWidth = 30;
            clearBtn.classList.add('active');
            blodBtn.classList.remove('active');
            thinBtn.classList.remove('active');
        }

        nullBtn.onclick =function(){
            ctx.clearRect(0,0,600,400);
        }

        saveBtn.onclick = function(){
            var urlData = canvas.toDataURL();
            // console.log(urlData);
            // var img = new Image();
            // img.src = urlData;
            //document.body.appendChild(img);
            var downloadA = document.createElement('A')
            downloadA.setAttribute('download','酷炫签名');
            downloadA.href = urlData;
            downloadA.click();
        }

        inputColor.onchange = function(){
            ctx.strokeStyle = inputColor.value;
        }
    </script>
        
</body>
</html>